<template>
  <div class="mat-card">
    <el-container>
      <el-main class="main-pane">
        <el-container>
          <el-header height="36px" class="top-toolbar">
            <tag
              v-for="tag in mat.tags"
              :key="tag.val"
              :tag="tag"
              @click="tagClicked(tag)"
            ></tag>
            <div class="tag-wrap edit" @click="editTags">
              <div class="neo-stat-icon">
              <ri i="edit" @click="editTags"></ri>
              编辑标签
              </div>
            </div>
            <a v-show="mat.source" class="link-source" :href="'/#/projects/' + mat.source">({{mat.source}})</a>
          </el-header>
          <el-main class="content-pane">
            <div v-if="mat.format == MatFormat.Video">
              <bili-card :note="mat"></bili-card>
            </div>
            <div v-else-if="mat.format == MatFormat.Project">
              <project-card :mat="mat"></project-card>
            </div>
            <div v-else-if="mat.format == MatFormat.Link">
              <div class="mat-title-bar">
                <a class="mat-title" :href="mat.link" target="_blank" @click="confirmExternal">{{ mat.title }}</a>
                <span v-show="mat.link" class="external-link">
                  <ri :title="mat.link" i="elink" @click="openExternal"></ri>
                </span>
              </div>
              <div class="mat-intro" :class="kindClass" v-html="summary"></div>
            </div>
            <div v-else>
              <div class="mat-title-bar">
                <span v-if="mat.isresource" class="mat-title">
                  {{mat.title}}
                </span>
                <a v-else class="mat-title" :href="'/#/mats/view/' + this.mat.id">{{ mat.title }}</a>
                <span v-if="mat.kind == MatKind.Poem">
                  <span v-for="author in mat.authors" :key="author.id" class="author">
                    <a class="author-link" :href="'/#/people/view/' + author.id">{{author.fullname}}</a>
                  </span>
                </span>
              </div>
              <div class="mat-intro" :class="kindClass" v-html="summary"></div>
            </div>
          </el-main>
          <el-footer height="30px" class="bottom-toolbar">
            <el-button icon="el-icon-receiving" v-if="mat.isresource" type="success" size="mini" title="导入诗词库，并自动收藏" @click="importResource">导入</el-button>
            <span v-else>
              <span class="tool">
                <star :star="star"></star>
              </span>
              <span class="tool">
                <nistat i="hot-fill" :value="mat.heat"></nistat>
              </span>
              <span class="tool">
              <nistat i="comments" value="0" @click="openComments"></nistat>
              </span>
              <span class="tool">
                <ri i="plan" title="学习计划" @click="editPlan"></ri>
              </span>
              <ri class="right" i="delete-2" title="删除" @click="remove" size="sm"></ri>
              <ri class="right" i="edit" title="编辑" @click="edit" size="sm"></ri>
            </span>
            <span class="right" v-if="mat.kind == MatKind.Project">
              <a class="project-link" :href="mat.link" target="_blank"><ri i="elink"></ri></a>
            </span>
            <span v-if="mat.kind != MatKind.Poem">
            <span v-for="author in mat.authors" :key="author.id" class="author right">
              <a class="author-link" :href="'/#/people/' + author.id">
                {{author.fullname}}
            </a>
            </span>
            </span>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Tag from "./Tag.vue";
import Nistat from "@/tools/NeoStatIcon.vue";
import Star from "@/tools/Star.vue";
import BiliCard from "./BiliCard.vue";
import ProjectCard from "./ProjectCard.vue";
import Markdown from "@/js/markdown/render.js";
import {MatKind, MatFormat} from "@/js/constants";
export default {
  components: {
    Tag,
    Nistat,
    Star,
    BiliCard,
    ProjectCard
  },
  props: ["mat"],
  emits: ["edit-tags"],
  computed: {
    hasTags() {
      return this.mat.tags && this.mat.tags.length > 0;
    },
    kindClass() {
      if (this.mat.kind == MatKind.Poem) {
        return "mat-poem";
      } else {
        return "";
      }
    },
    star() {
      if ("star" in this.mat) {
        let star = this.mat.star;
        if (!star.mid) star.mid = this.mat.id;
        return star;
      } else {
        return {mid: this.mat.id, value : 0};
      }
    },
    summary() {
      if (this.mat.intro) {
        return this.mat.intro;
      } else {
        let maxLines = 5;
        let content = this.mat.content;
        // 获取前三行内容
        let lines = content.split(/\n/);
        let ret = [];
        let n = 0;
        while (n < lines.length && ret.length < maxLines) {
          let line = lines[n];
          ret.push(line);
          n = n + 1;
        }
        if (ret.length > maxLines) {
          ret.push("...");
        }
        let md = ret.join("\n");
        // 转化为markdown
        return Markdown.render(md);
      }
    },
    matSource() {
      if (!this.mat.source) return "";
      if (this.mat.source.startsWith("http")) {
        return this.mat.source;
      } else {
        return "http://" + this.mat.source;
      }
    }

  },
  data() {
    return {
      MatKind: MatKind,
      MatFormat: MatFormat
    }
  },
  methods: {
    remove() {
      // TODO
    },
    edit() {
      this.$router.push("/mats/edit/" + this.mat.id);
    },
    importResource() {
      this.$router.push("/mats/resources/edit/" + this.mat.id);
    },
    voteUp() {
      document.getElementsByClassName("left-toolbar").classList.add("active");
    },
    tagClicked(tag) {
      console.log("clicking tag:", tag);
      this.$router.push(`/tags/view/${tag.id}`);
    },
    openComments() {
      this.$router.push(`/mats/view/${this.mat.id}`);
    },
    openExternal() {
      window.open(this.mat.link, "_blank");
    },
    confirmExternal() {
      return true;
      /*
      if (window.confirm("haha?")) {
        return true;
      } else {
        e.preventDefault();
      }
      */
     /*
     e.preventDefault();
      this.$confirm("当前的剪藏为外站链接，是否打开？")
        .then(() => {
          this.openExternal();
        })
        .catch(() => {});
        */
    },
    editTags() {
      if (this.mat.id) {
        this.$emit("edit-tags", this.mat);
      }
    },
    editPlan() {
      this.$router.push("/plans/view");
    }
  },
};
</script>

<style lang="stylus">
.mat-card
  border 1px solid #eee
  border-radius 4px
  max-height 500px
  padding 0
  margin-bottom 1vh
  &:hover
    border 1px solid #B3D8FF
    // background-color #ECF5FF
    box-shadow 1px 0 5px rgba(0,0,0,.1)


  .left-toolbar
    align-items center
    box-sizing border-box
    display flex
    flex-direction column
    height 100%
    left 0

    svg
      color #999
      font-size bold
      cursor pointer

    .stat
      margin 5px 0

  .left-toolbar.active
    svg
      color #409EFF

  .main-pane
    padding 0.8vh 1vw 1vh 1vw

    .content-pane
      padding 0

      .mat-title-bar
        border-bottom 1px dotted #eee
        padding-bottom 5px
        margin-bottom 10px

        .mat-title
          font-size 1.5em
          font-weight bold
          color #333

        a:hover
          color #409EEF
          text-decoration none

        .author
          margin-left 8px
          font-size 1em
          color #999

      .mat-intro
        margin-top 10px
        font-size 1em
        min-height 100px

        &.mat-poem
          font-size 1.2em

    .top-toolbar
      padding 0
      padding-top 4px

      .tag-wrap
        margin-right 5px

      .link-source
        color #999
        text-decoration none

        &:hover
          text-decoration underline

    .external-link
      margin-left 0.5em
      font-size 0.8em
      color grey

      &:hover
        color red

    .bottom-toolbar
      margin-top 10px
      padding 0
      line-height 30px
      color #666

      .tool
        margin-right 1vw

      .star,.neo-stat-icon
        margin-right 10px

      .right
        float right
        margin-left 10px
</style>